<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建发布内容</title>
    <link rel="stylesheet" href="../assets/plugin/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css"
          href="../assets/plugin/bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../assets/plugin/jqueryTzUpload/css/style.css">
    <link rel="stylesheet" type="text/css" href="../assets/plugin/jqueryTzUpload/css/demo.css">
    <link rel="stylesheet" type="text/css"
          href="../assets/plugin/photoScroll/css/photoScroll.css"/>
    <link rel="stylesheet" type="text/css"
          href="../assets/plugin/jqueryTzUpload/webuploader-0.1.5/webuploader.css">
    <style type="text/css">
        .form-section {
            margin-top: 20px;
            border: 1px solid #797979;
        }

        .form-title {
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            background-color: #66ccff;
        }

        .form-horizontal {
            padding: 25px;
        }

        .photoGallery {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 6;
        }

        .step-pager ul {
            bottom: 10%;
        }

        .warm-tips {
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="photoGallery"></div>
<div class="container">
    <div class="form-section">
        <div class="form-title">
            创建发布内容
        </div>
        <form class="form-horizontal form-content">
            <div class="form-group">
                <label class="col-sm-2 control-label">使用角色:</label>

                <div class="col-sm-10">
                    <select class="form-control role-select" name="role-select">
                        <!--<option value="0">全部</option>
                        <option value="1">客户</option>
                        <option value="2">报关行</option>-->
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">状态:</label>

                <div class="col-sm-10">
                    <select class="form-control status-select" name="status-select">
                        <option value="0">草稿</option>
                        <option value="1">生效</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="title-input" class="col-sm-2 control-label">标题:</label>

                <div class="col-sm-10">
                    <input type="text" class="form-control title-input" id="title-input"
                           placeholder="对外可查看到的相关标题" name="title-input">
                </div>
            </div>
            <div class="form-group">
                <label for="mark-input" class="col-sm-2 control-label">备注:</label>

                <div class="col-sm-10">
                    <input type="text" class="form-control mark-input" id="mark-input"
                           placeholder="对本次发布内容的说明"
                           name="mark-input">
                </div>
            </div>
            <div class="form-group">
                <div class="page-container">
                    <p>请选择图片上传</p>

                    <div class="warm-tips">注:每张图片不得大于1M,最多上传12张图片</div>
                    <div id="uploader" class="wu-example">
                        <div class="queueList">
                            <div id="dndArea" class="placeholder">
                                <div id="filePicker"></div>
                                <p>或将照片拖到这里</p>
                            </div>
                        </div>
                        <div class="statusBar" style="display:none">
                            <div class="progress">
                                <span class="text">0%</span>
                                <span class="percentage"></span>
                            </div>
                            <div class="info"></div>
                            <div class="btns">
                                <div id="filePicker2"></div>
                                <!--<div class="uploadBtn">开始上传</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10">
                    <button type="button" class="btn btn-default view-btn">预览</button>
                    <button type="button" class="btn btn-default submit-btn">提交</button>
                    <button type="button" class="btn btn-default back-btn">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/plugin/bootstrap/dist/js/bootstrap.js"></script>
<!--<script type="text/javascript"
        src="../assets/plugin/jqueryTzUpload/webuploader-0.1.5/webuploader.min.js"></script>-->
<script type="text/javascript"
        src="../assets/plugin/jqueryTzUpload/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript"
        src="../assets/plugin/photoScroll/js/photoScroll.js"></script>
<script src="../assets/plugin/jqueryTzUpload/webuploader-0.1.5/extend-file-webuploader.js"
        type="text/javascript"></script>
<script type="text/javascript">
    /*window.webuploader = {
     config: {
     thumbWidth: 250, //缩略图宽度，可省略，默认为110
     thumbHeight: 250, //缩略图高度，可省略，默认为110
     wrapId: 'uploader' //必填
     },
     //处理客户端新文件上传时，需要调用后台处理的地址, 必填
     uploadUrl: '/notice/uploadOrReplace',
     //处理客户端原有文件更新时的后台处理地址，必填
     updateUrl: 'fileupdate.php',
     //当客户端原有文件删除时的后台处理地址，必填
     removeUrl: '/notice/deletePicture',
     //初始化客户端上传文件，从后台获取文件的地址, 可选，当此参数为空时，默认已上传的文件为空
     initUrl: '/notice/getNotice',
     allMaxNum: 12,
     getUrlParams: function (arg) {
     var search = window.location.search.substr(1).split("&");
     for (var i = 0; i < search.length; i++) {
     var obj = {};
     var splitArr = search[i].split("=");
     if ($.inArray(arg, splitArr) != -1) {
     return splitArr[1];
     }
     }
     }
     };*/
    var noticePrototype = {
        _init: function () {
            this.$roleSelect = $(".role-select");
            this.$statusSelect = $(".status-select");
            this.$titleInput = $(".title-input");
            this.$markInput = $(".mark-input");
            this.$btn = $(".btn");
            this.$uploader = $("#uploader");
            this._loadApplyRoles();
            this._bind();
        },
        _getUrlParams: function (arg) {
            var search = window.location.search.substr(1).split("&");
            for (var i = 0; i < search.length; i++) {
                var splitArr = search[i].split("=");
                if ($.inArray(arg, splitArr) != -1) {
                    return splitArr[1];
                }
            }
        },
        _loadEditData: function () {
            var _this = this;
            $.ajax({
                       url: '/notice/getNotice',
                       data: {
                           "noticeId": _this._getUrlParams("noticeId"),
                           "noticeType": _this._getUrlParams("noticeType")
                       },
                       type: 'get',
                       dataType: 'json',
                       success: function (data) {
                           console.log(data);
                           if (data.result) {
                               var result = data.data;
                               _this.$roleSelect.val(result.appliedRoles);
                               _this.$statusSelect.val(result.state);
                               _this.$titleInput.val(result.title);
                               _this.$markInput.val(result.remark);
                               _this._initFileWebUploader(12 - result.pictureList.length);
                               /*_this._initFileWebUploader(12 - result.pictureList.length == 0 ? -1
                                : 12 - result.pictureList.length);*/
                           }

                       },
                       error: function (XMLHttpRequest, textStatus, errorThrown) {
                           console.log(textStatus);
                       }
                   });
        },
        _loadApplyRoles: function () {
            var _this = this;
            //请求适用角色
            $.ajax({
                       url: '/notice/appliedRoles',
                       type: 'get',
                       dataType: 'json',
                       success: function (data) {
                           var result = data.results;
                           if (result.length) {
                               for (var i = 0; i < result.length; i++) {
                                   var Html = "<option value='" + result[i][1] + "'>"
                                              + result[i][0]
                                              + "</option>";
                                   _this.$roleSelect.append(Html);
                               }
                               _this._selectChange();
                               if (_this._getUrlParams("noticeType") == "update") {
                                   _this._loadEditData();
                               }
                               else {
                                   _this._initFileWebUploader(12);
                               }
                           }
                       },
                       error: function (XMLHttpRequest, textStatus, errorThrown) {
                           console.log(textStatus);
                       }
                   });
        },
        _initFileWebUploader: function (maxNum) {
            var _this = this;
            $("#uploader").fileWebUploader({
                                               thumbWidth: 250, //缩略图宽度，可省略，默认为110
                                               thumbHeight: 250, //缩略图高度，可省略，默认为110
                                               //处理客户端新文件上传时，需要调用后台处理的地址, 必填
                                               uploadUrl: '/notice/uploadOrReplace',
                                               //处理客户端原有文件更新时的后台处理地址，必填
                                               updateUrl: 'fileupdate.php',
                                               //当客户端原有文件删除时的后台处理地址，必填
                                               removeUrl: '/notice/deletePicture',
                                               //初始化客户端上传文件，从后台获取文件的地址, 可选，当此参数为空时，默认已上传的文件为空
                                               initUrl: '/notice/getNotice',
                                               allMaxNum: maxNum,//限制一次可以上传多少张
                                               //获得url地址中的参数
                                               getUrlParams: _this._getUrlParams,
                                               allMaxSize: 1
                                           });
        },
        _getSelected: function (target) {
            var selectedVal = target.find("option:selected").val();
            return selectedVal;
        },
        _selectChange: function () {
            var _this = this;
            $("select").on("change", function () {
                if ($(this).hasClass(".role-select")) {
                    _this._getSelected(_this.$roleSelect);
                } else if ($(this).hasClass(".status-select")) {
                    _this._getSelected(_this.$statusSelect);
                }
            });
        },
        _getInputVal: function (target) {
            var val = target.val();
            return val;
        },
        _getLiImg: function (target) {
            var pictureName = [];
            var dealPictureName = [];
            this.$uploader.find(".filelist li[data-src='server']").each(function () {
                var obj = {};
                obj.sort = $(this).attr("data-sort");
                obj.target = $(this).find("img").attr(target);
                pictureName.push(obj);
            });
            pictureName.sort(function (a, b) {
                return a.sort - b.sort;

            });
            for (var i = 0; i < pictureName.length; i++) {
                dealPictureName.push(pictureName[i].target);
            }
            return dealPictureName;
        },
        _bind: function () {
            var _this = this;
            this.$btn.on("click", function () {
                             if ($(this).hasClass("submit-btn")) {
                                 $.ajax({
                                            url: '/notice/submit',
                                            type: 'post',
                                            dataType: 'json',
                                            data: {
                                                "id": _this._getUrlParams("noticeId"),
                                                "appliedRoles": _this._getSelected(_this.$roleSelect),
                                                "state": _this._getSelected(_this.$statusSelect),
                                                "remark": _this._getInputVal(_this.$markInput),
                                                "title": _this._getInputVal(_this.$titleInput),
                                                "pictures": _this._getLiImg("name").join(",")
                                            },
                                            success: function (data) {
                                                if (data.result && data.msg == '提交成功') {
                                                    location.href = "/notice/noticeManager";
                                                }
                                            },
                                            error: function (XMLHttpRequest, textStatus,
                                                             errorThrown) {
                                                console.log(textStatus);
                                            }
                                        }
                                 )
                                 ;
                             } else if ($(this).hasClass("back-btn")) {
                                 history.go(-1);
                             } else if ($(this).hasClass("view-btn")) {
                                 $(".photoGallery").photoScroll({
                                                                    needRequest: false,
                                                                    dataSource: _this._getLiImg("real-src")
                                                                });
                             }
                         }
            )
            ;
        }
    };
    $(document).ready(function () {
        noticePrototype._init();
        /*window.onbeforeunload = function (e) {
         var e = window.event ? window.event : e;
         var n = e.screenX - window.screenLeft;
         var b = n > document.documentElement.scrollWidth - 20;
         if (b && e.clientY < 0 || e.altKey) {
         console.log("这是一个关闭操作而非刷新");
         } else {
         console.log("这是一个刷新操作而非关闭");
         $.ajax({
         url: '/notice/dealBeforeEdit',
         data: {
         "noticeId": window.webuploader.getUrlParams("noticeId"),
         "noticeType": window.webuploader.getUrlParams("noticeType")
         },
         type: 'get',
         async: false,
         dataType: 'json',
         success: function (data) {
         console.log(data);
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
         console.log(textStatus);
         }
         });
         }
         }*/
        $.ajax({
                   url: '/notice/dealBeforeEdit',
                   data: {
                       "noticeId": noticePrototype._getUrlParams("noticeId"),
                       "noticeType": noticePrototype._getUrlParams("noticeType")
                   },
                   type: 'get',
                   dataType: 'json',
                   success: function (data) {
                       if (data.result) {
                           console.log(data.msg);
                       }
                   },
                   error: function (XMLHttpRequest, textStatus, errorThrown) {
                       console.log(textStatus);
                   }
               });
    });
</script>
<!--<script src="../assets/plugin/jqueryTzUpload/webuploader-0.1.5/extend-webuploader.js"
        type="text/javascript"></script>-->

</body>
</html>